Amuki Estudio's profile

Amuki Tool No. 182: Modularity with P5js

Modularity with P5js

The tool we present was designed in p5.js, a JavaScript library specifically created for creating and manipulating interactive graphics in web environments. P5.js simplifies the development process by providing functions and methods that make it easy to implement graphics and animations in the browser. This particular tool uses a module system, consisting of 15 interchangeable sets triggered by pressing certain keyboard characters. The flexibility of the code allows for the inclusion of modules in .svg* and .gif** formats, enabling the construction of both static and dynamic letters and patterns.

* SVG (Scalable Vector Graphics) files are a vector image format that defines graphics based on vectors, allowing them to be scaled without loss of quality. On the other hand, ** GIF (Graphics Interchange Format) files are animated images containing multiple frames, enabling the playback of visual sequences.




Modularidad con P5js

La herramienta que presentamos fue diseñada en p5.js, una biblioteca de JavaScript especialmente creada para la creación y manipulación de gráficos interactivos en entornos web. P5.js simplifica el proceso de desarrollo al proporcionar funciones y métodos que facilitan la implementación de gráficos y animaciones en el navegador. Esta herramienta en particular utiliza un sistema de módulos, compuesto por 15 sets intercambiables mediante la pulsación de ciertos caracteres del teclado. La flexibilidad del código permite la inclusión de módulos en formatos .svg* y .gif**, lo que posibilita la construcción de letras y patrones tanto estáticos como dinámicos.

Los archivos .svg* (Scalable Vector Graphics) son un formato de imagen vectorial que define gráficos basados en vectores, lo que significa que pueden escalarse sin pérdida de calidad. Por otro lado, los archivos .gif** (Graphics Interchange Format) son imágenes animadas que contienen varios frames, permitiendo la reproducción de secuencias visuales.





La tipografía modular se refiere a la creación de letras y caracteres que se pueden combinar y intercambiar de manera modular, brindando flexibilidad y diversidad en la presentación visual del texto. Asimismo, los patrones tipográficos, ya sean estáticos o dinámicos, juegan un papel crucial en el diseño, agregando un elemento visual distintivo y contribuyendo a la cohesión estética. Los patrones estáticos son invariables, mientras que los dinámicos pueden cambiar o animarse, proporcionando una experiencia visual más dinámica e interactiva. Integrar estas herramientas en la web permite a los usuarios no solo disfrutar de una experiencia más atractiva, sino también participar activamente al explorar y modificar la presentación gráfica según sus preferencias.




__
Thank you for exploring my work. If you are interested in learning about the different methodologies that I apply in my research project, I invite you to visit my website and explore the topics that I teach.

INSTAGRAM  |  WEB SITE  |  TEACHING



Amuki Tool No. 182: Modularity with P5js
Published:

Amuki Tool No. 182: Modularity with P5js

The tool we present was designed in p5.js, a JavaScript library specifically created for creating and manipulating interactive graphics in web en Read More

Published: